<template>
  <w-dialog class="w-jigsaw-dialog">
    <img class="w-jigsaw-big" :src="bigSrc">
    <img class="w-jigsaw-small" :src="smallSrc" :width="smallWidth" :style="{left: smallLeft + 'px'}" @dragstart.prevent="dragstart" @mousedown="mousedown">
    <span @click="refresh" class="w-jigsaw-refresh">刷新</span>
  </w-dialog>
</template>

<script>
  import $ from '../dfish.js'

  export default {
    data() {
      return {
        smallLeft: 0
      }
    },
    watch: {
      'context.x.modelValue': {
        handler(v) {
          let m = this.context.max()
          let n = this.context.min()
          this.smallLeft = (this.dialog.x.width - this.smallWidth) * (v / (m - n))
        }
      }
    },
    methods: {
      refresh(e) {
        this.context.refresh(e)
      },
      dragstart(e) {
        //
      },
      mousedown(e) {
        this.context.dragstart(e)
      }
    },
    computed: {
      dialog() {
        return $.dialog(this)
      },
      context() {
        return this.dialog.context
      },
      bigSrc() {
        return this.context.x.big.src
      },
      smallSrc() {
        return this.context.x.small.src
      },
      smallWidth() {
        return this.dialog.x.height * (this.context.x.small.width / this.context.x.small.height)
      }
    }
  }
</script>

<style>
  .w-jigsaw-big {
    width: 100%;
    height: 100%;
  }

  .w-jigsaw-small {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
  }

  .w-jigsaw-refresh {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #fff;
    cursor: pointer;
    text-shadow: 0 0 3px #000;
  }
</style>
